<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<html>
<head>
    <title>员工列表</title>
    <%--     web路径问题：--%>
    <%--                 不以 / 开头：以当前资源路径为基准，容易出现问题--%>
    <%--                 以 / 开头：以服务器的路径为标准(http://localhost:3306),需要加上项目名--%>

    <link rel="stylesheet" href="${APP_PATH}/static/bootstrap/css/bootstrap.min.css"/>
    <script type="text/javascript" src="${APP_PATH}/static/jquery/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="${APP_PATH}/static/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <%--    标题行--%>
    <div class="row">
        <div class="col-md-12"><h1>SSM-CRUD</h1></div>
    </div>
    <%--    操作--%>
    <div class="row">
        <div class="col-md-3 col-md-offset-9">
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#addEmp" id="addEmpBtn">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>新增
            </button>
            </button>

            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#delEmp">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>删除
            </button>
            </button>
        </div>
    </div>

    <!-- addEmpModal -->
    <div class="modal fade" id="addEmp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>新增员工</h4>
                </div>
                <form class="form-horizontal">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="inputName" class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-10">
                                <input type="name" class="form-control" name="empName" id="inputName" placeholder="张三">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">性别</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="inlineRadio1" value="M" checked> 男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="inlineRadio2" value="W"> 女
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail" class="col-sm-2 control-label">邮箱</label>
                            <div class="col-sm-10">
                                <input type="name" class="form-control" name="email" id="inputEmail"
                                       placeholder="@wsd.com">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">部门</label>
                            <div class="col-sm-3">
                                <select class="form-control" id="deptSelect" name="dId"></select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" id="saveEmp" data-toggle="modal" data-target=".bs-example-modal-sm">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content" id="returnMessage">
                <h4></h4>
            </div>
        </div>
    </div>

    <!-- delEmpModal -->
    <div class="modal fade" id="delEmp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>确认删除以下员工吗？</h4>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <br>
    <%--    显示表格数据--%>
    <div class="row">
        <table class="table table-hover">
            <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>性别</th>
                <th>邮箱</th>
                <th>部门</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tableBody">

            </tbody>
        </table>
    </div>
    <%--    分页信息--%>
    <div class="row">
        <%--        文字--%>
        <div class="col-md-6" id="pageInfo">

        </div>
        <%--        分页条--%>
        <div class="col-md-12">
            <h1>
                <nav aria-label="Page navigation">
                    <ul class="pagination pagination-sm" id="navBar"></ul>
                </nav>
            </h1>
        </div>
    </div>
</div>

</body>

<script type="text/javascript">

    $(function () {

        // 页面加载完成后自动获取第一页数据
        send(1);

        // 点击添加时，从数据库中获取部门信息
        $("#addEmpBtn").click(function () {
            getDeptNames();
        });

        $("#saveEmp").click(function () {
            let params = $("#addEmp form").serialize();
            //对员工信息进行校验（前端校验）
            validateEmp(params);
            $.ajax({
                url: "${APP_PATH}/addEmp",
                data: params,
                type: "POST",
                success: function (data) {
                    let context = $("#returnMessage");
                    context.append($("<h4></h4>").append(data.msg));
                }
            });
        });

        function validateEmp() {
            //校验姓名
            $("#inputName")
        }

        // 获取部门名称
        function getDeptNames() {
            $.ajax({
                url: "${APP_PATH}/getDeptNames",
                type: "GET",
                success: function (data) {
                    let select = $("#deptSelect");
                    select.empty();
                    $.each(data, function (index, item) {
                        select.append($("<option></option>").append(item.deptName).attr("value", item.deptId));
                    });
                }
            });
        }

        function send(pageNumber) {

            $.ajax({
                url: "${APP_PATH}/getData",
                data: "pageNumber=" + pageNumber,
                type: "GET",
                success: function (jsonData) {
                    initTableItem(jsonData);
                    initPageInfo(jsonData);
                    initNavBar(jsonData);
                }
            });
        };

        //构建化表格
        function initTableItem(data) {

            let tableBody = $("#tableBody");
            tableBody.empty();

            //从json数据中获取存放员工的list
            let employees = data.extendedData.pageInfo.list;
            $.each(employees, function (index, item) {

                //    构建要显示的内容
                let empId = $("<td></td>").append(item.empId);
                let empName = $("<td></td>").append(item.empName);
                let gender = $("<td></td>").append(item.gender == "M" ? "男" : "女");
                let email = $("<td></td>").append(item.email);
                let dept = $("<td></td>").append(item.dept.deptName);

                // 添加按钮
                // <button type="button" class="btn btn-info">
                //     <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>新增</button>
                // <button type="button" class="btn btn-danger">
                //     <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除</button>

                let editBtn = $("<td></td>").addClass("btn btn-link btn-xs").append("<span></span>").addClass("glyphicon glyphicon-pencil");
                let row = $("<tr></tr>")
                    .append(empId)
                    .append(empName)
                    .append(gender)
                    .append(email)
                    .append(dept)
                    .append(editBtn)
                tableBody.append(row);
            });
        };

        //构建分页条
        function initNavBar(data) {

            let bar = $("#navBar");
            bar.empty();

            let page = data.extendedData.pageInfo;
            let nums = page.navigatepageNums;
            let pageNumber = page.pageNum;

            let firstPage = $("<li></li>").append($("<span></span>").append("首页"));
            let prePage = $("<li></li>").append($("<span></span>").append("&laquo;"));
            let aftPage = $("<li></li>").append($("<span></span>").append("&raquo;"));
            let lastPage = $("<li></li>").append($("<span></span>").append("尾页"));


            if (page.isFirstPage) {
                firstPage.addClass("disabled");
                prePage.addClass("disabled");
            } else {
                firstPage.click(function () {
                    send(1);
                });
                prePage.click(function () {
                    send(pageNumber - 1);
                })
            }

            if (page.isLastPage) {
                aftPage.addClass("disabled");
                lastPage.addClass("disabled");
            } else {
                lastPage.click(function () {
                    send(page.pages);
                });
                aftPage.click(function () {
                    send(pageNumber + 1);
                });
            }

            bar.append(firstPage).append(prePage);

            let li;
            $.each(nums, function (index, item) {
                li = $("<li></li>").append($("<span></span>").append(item));
                li.click(function () {
                    send(item);
                });
                pageNumber == item ? li.addClass("active") : li;
                bar.append(li);
            });
            bar.append(aftPage).append(lastPage);
        }

        //构建分页信息
        function initPageInfo(data) {

            let info = data.extendedData.pageInfo;

            <%--当前${pageInfo.pageNum}页,总共${pageInfo.pages}页,总记录数:${pageInfo.total}--%>

            let infoDiv = $("#pageInfo");
            infoDiv.empty();
            infoDiv.append("当前第" + info.pageNum + "页,")
                .append("总共" + info.pages + "页,")
                .append("总记录数:" + info.total + "条");
        };
    });

</script>
</html>
